<template>
  <view class="index clearfix">
    <view class="custom-navigation" :style="{ height: navHeight + 'px', backgroundColor: navBackgroundColor }">
      <view class="container">
        <view class="avatar-wrapper">
          <nut-avatar size="small" shape="round" style="overflow: hidden;">
            <image style="width: 100%;height: 100%;"
              src="@/assets/img/A8708FFD-7A4D-47F2-9C11-4BF9A9D3B415_4_5005_c.jpeg" />
          </nut-avatar>
        </view>
        <view>AppName</view>
      </view>
    </view>
    <view class="swiper">
      <nut-swiper :init-page="initPage" :pagination-visible="true" pagination-color="#426543" auto-play="0"
        :height="swiperHeight">
        <nut-swiper-item>
          <image mode="heightFix" src="@/assets/img/3CA9EB446A17-1.jpeg" alt="" />
        </nut-swiper-item>
        <nut-swiper-item>
          <image mode="widthFix" src="@/assets/img/A79CE44070FA-1.jpeg" alt="" />
        </nut-swiper-item>
        <nut-swiper-item>
          <image mode="widthFix" src="@/assets/img/A344288F0FFC-1.jpeg" alt="" />
        </nut-swiper-item>
      </nut-swiper>
    </view>
    <view class="category">
      <CardWrapper>
        <view class="category-list">
          <view v-for="(item, index) in goodCategories" :key="index" className="category-item">
            <Image style="width: 100%;height: 100%;" :src="item" />
          </view>
        </view>
       
      </CardWrapper>
    </view>

    <view>
      <image src="@/assets/img/NutUItaro2.jpg" alt="" />
      <image src="@/assets/img/NutUItaro2.jpg" alt="" />
      <image src="@/assets/img/NutUItaro2.jpg" alt="" />

      <image src="@/assets/img/NutUItaro2.jpg" alt="" />
      <image src="@/assets/img/NutUItaro2.jpg" alt="" />
      <image src="@/assets/img/NutUItaro2.jpg" alt="" />
      <image src="@/assets/img/NutUItaro2.jpg" alt="" />
      <image src="@/assets/img/NutUItaro2.jpg" alt="" />
      <image src="@/assets/img/NutUItaro2.jpg" alt="" />

    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, onBeforeMount, ref } from 'vue'
import Taro from '@tarojs/taro'
import CardWrapper from '@/components/CardWrapper'

// 自定义导航头高度
const CUSTOM_NAV_HEIGHT = 83
// 轮播图高度
const SWIPER_HEIGHT = 300

const initPage = ref(0)
const navHeight = ref(CUSTOM_NAV_HEIGHT)
const navBackgroundColor = ref()
const swiperHeight = ref(SWIPER_HEIGHT)

const goodCategories = ref([
  "https://dcdn.it120.cc/2023/04/14/1058ef4c-092d-48ed-a9d6-7481b53fc561.png",
  "https://dcdn.it120.cc/2023/04/14/1058ef4c-092d-48ed-a9d6-7481b53fc561.png",
  "https://dcdn.it120.cc/2023/04/14/1058ef4c-092d-48ed-a9d6-7481b53fc561.png",
])

// 
// const getHeight = () => {
//   const sysinfo = Taro.getSystemInfoSync()
//   const systemInfo: any = Taro.getSystemInfoSync()
//   const menuButtonInfo = Taro.getMenuButtonBoundingClientRect()

//   const app = Taro.getApp()
//   app.statusHeight = sysinfo.statusBarHeight
//   app.navHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height
//   navHeight.value = CUSTOM_NAV_HEIGHT
// }

const onScroll = () => {

}

onBeforeMount(() => {
  // getHeight()
})

Taro.usePageScroll((payload) => {
  if (payload.scrollTop > 80) {
    navBackgroundColor.value = '#fff'
  } else {
    navBackgroundColor.value = 'transparent'
  }
})

</script>

<style lang="scss">
.index {
  position: relative;
  padding: 0 10rpx;
  height: 100%;

  .custom-navigation {
    position: fixed;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    transition: all 0.3s linear;

    .container {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .avatar-wrapper {
      margin: 0 20rpx;
    }
  }

  .swiper {
    width: 100%;
    height: 600rpx;

    .nut-swiper-item {
      width: 100%;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .category {
    &-list {
      display: flex;
    }
    &-item {
        width: 100rpx;
        height: 100rpx;
      }
  }
}</style>
